<template>
  <div style="width:100%;height:100%">
    <div class="header">
      <van-button plain block class="leftBtn" @click="backPage()">
        &lt;
      </van-button>
      <div class="sortLogo">商品列表</div>
    </div>
    <van-sticky>
      <div style="width:100%;height:50px;background:#fff;border:1px solid #ccc">
        <ul>
          <li style="color:red">综合</li>
          <li>销量</li>
          <li><van-icon name="exchange" />价格</li>
          <li>最新</li>
        </ul>
      </div>
    </van-sticky>
    <div class="shopList">
      <div class="list-item" v-for="(item, index) in listdata" :key="index">
        <img :src="item.img" style="width:100%;height:150px" />
        <div class="listText">
          <!-- <van-icon name="cart-o" style="float: right;" @click="getcart(index)"/> -->
          <div class="title">{{ item.goodname }}</div>
          <div>{{ item.goodsStar }}</div>
          <div class="price">${{ item.goodprice }}</div>
          <van-button type="danger" @click="getcart(index)" style="height:30px"
            >加入购物车</van-button
          >
        </div>
      </div>
    </div>
    <div style="width:100%;height:80px"></div>
  </div>
</template>

<script>
import List from "@/api/sortApi";
import { Toast } from "vant";
import { logOut, getUser } from "@/utils/auth";

export default {
  data() {
    return {
      listdata: [],
      page: 1,
      pagesize: 30,
    };
  },

  components: {},

  methods: {
    // 获取列表
    async getlist() {
      try {
        let p = await List.getSort(this.page, this.pagesize);
        this.listdata = p.data.data;
        console.log(p.data);
      } catch (err) {
        console.log(err);
      }
    },
    // 点击加入购物车
    async getcart(index) {
      try {
        Toast("加入购物车成功");
        let good = this.listdata[index];
        let userinf = getUser();
        if (userinf) {
          userinf = JSON.parse(userinf);
          good.uid = userinf.uid;
        }
        good.goodid = good._id;
        console.log(good);
        let p = await this.$store.dispatch("addGood", good);
        // console.log(p);
      } catch (err) {
        console.log(err);
      }
    },
    backPage() {
      window.history.back();
    },
  },
  created() {
    this.getlist();
  },
};
</script>

<style scoped>
.leftBtn {
  width: 50px;
  height: 50px;
  float: left;
}

.sortLogo {
  width: 200px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  margin: 0 auto;
}

li {
  height: 100%;
  width: 25%;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
}

.shopList {
  width: 100%;
  background-color: #f2f2f2;
  display: flex;
  flex-wrap: wrap;
}
.shopList .list-item {
  width: 175px;
  padding: 10px 0;
  margin: 5px;
  border: 1px solid #ececec;
  border-radius: 10px;
  background-color: #fff;
}
.shopList img {
  position: relative;
  width: 100%;
  display: block;
}
.shopList .listText {
  margin-left: 10px;
}
.shopList .listText .title {
  font-size: 14px;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
}
.shopList .listText .price {
  font-size: 18px;
  color: #e31436;
  font-weight: bold;
  height: 20px;
  margin-top: 10px;
}
</style>
